<template>
  <div class="app-container">

    <el-form ref="form" label-width="140px" class="help">
      <el-row :gutter="100">
        <el-col :span="12">

          <div class="tit">
            <em>*</em> 开放时间
            <div style="float:right;">
              <el-button type="primary" size="mini" @click="handleLang(1)">多语言配置</el-button>
              <el-button type="primary" size="mini" @click="handleAdd(1)">保存</el-button>
            </div>
          </div>
          <el-form-item label="闭馆时间">
            <el-select v-model="form.closingStartTime" placeholder="请选择" clearable>
              <el-option label="周一" value="1" />
              <el-option label="周二" value="2" />
              <el-option label="周三" value="3" />
              <el-option label="周四" value="4" />
              <el-option label="周五" value="5" />
              <el-option label="周六" value="6" />
              <el-option label="周日" value="7" />
            </el-select>
            <span> ~ </span>
            <el-select v-model="form.closingEndTime" placeholder="请选择" clearable>
              <el-option label="周一" value="1" />
              <el-option label="周二" value="2" />
              <el-option label="周三" value="3" />
              <el-option label="周四" value="4" />
              <el-option label="周五" value="5" />
              <el-option label="周六" value="6" />
              <el-option label="周日" value="7" />
            </el-select>
          </el-form-item>
          <el-form-item label="开放时间">
            <el-select v-model="form.openStartTime" placeholder="请选择" clearable>
              <el-option label="周一" value="1" />
              <el-option label="周二" value="2" />
              <el-option label="周三" value="3" />
              <el-option label="周四" value="4" />
              <el-option label="周五" value="5" />
              <el-option label="周六" value="6" />
              <el-option label="周日" value="7" />
            </el-select>
            <span> ~ </span>
            <el-select v-model="form.openEndTime" placeholder="请选择" clearable>
              <el-option label="周一" value="1" />
              <el-option label="周二" value="2" />
              <el-option label="周三" value="3" />
              <el-option label="周四" value="4" />
              <el-option label="周五" value="5" />
              <el-option label="周六" value="6" />
              <el-option label="周日" value="7" />
            </el-select>
          </el-form-item>

          <el-form-item label="每日开馆时间">
            <el-select v-model="form.dayStartTime" placeholder="请选择" clearable>
              <el-option v-for="item in hours" :label="item" :value="item" />
            </el-select>
            <span> ： </span>
            <el-select v-model="form.dayEndTime2" placeholder="请选择" clearable>
              <el-option label="00" value="00" />
              <el-option label="15" value="15" />
              <el-option label="30" value="30" />
              <el-option label="45" value="45" />
            </el-select>
          </el-form-item>
          <el-form-item label="每日闭馆时间">
            <el-select v-model="form.dayEndTime" placeholder="请选择" clearable>
              <el-option v-for="item in hours" :label="item" :value="item" />
            </el-select>
            <span> ： </span>
            <el-select v-model="form.dayEndTime2" placeholder="请选择" clearable>
              <el-option label="00" value="00" />
              <el-option label="15" value="15" />
              <el-option label="30" value="30" />
              <el-option label="45" value="45" />
            </el-select>
          </el-form-item>
          <el-form-item label="每日停止入场时间">
            <el-select v-model="form.dayStopTime" placeholder="请选择" clearable>
              <el-option v-for="item in hours" :label="item" :value="item" />
            </el-select>
            <span> ： </span>
            <el-select v-model="form.dayStopTime2" placeholder="请选择" clearable>
              <el-option label="00" value="00" />
              <el-option label="15" value="15" />
              <el-option label="30" value="30" />
              <el-option label="45" value="45" />
            </el-select>
          </el-form-item>

          <el-form-item label="备注">
            <el-input type="textarea" :rows="3" v-model="form.remark" placeholder="请输入" />
          </el-form-item>


          <div class="tit">
            <em>*</em> 公共交通
            <div style="float:right;">
              <el-button type="primary" size="mini" @click="handleLang(2)">多语言配置</el-button>
              <el-button type="primary" size="mini" @click="handleAdd(1)">保存</el-button>
            </div>
          </div>
          <el-input style="margin-top: 10px;" type="textarea" :rows="5" v-model="form.publicTransport" placeholder="请输入" />

          <div class="tit" style="margin-top:30px;">
            <em>*</em> 车辆停泊
            <div style="float:right;">
              <el-button type="primary" size="mini" @click="toAdd(1)">添加停车场</el-button>
            </div>
          </div>
          <el-table :data="parks">
            <el-table-column label="停车场地址" align="center" prop="address" />
            <el-table-column label="开放时间" align="center" prop="allDay">
              <template slot-scope="scope">
                <span>{{scope.row.allDay ? '长期' : '非长期'}}</span>
              </template>              
            </el-table-column>
            <el-table-column label="收费标准" align="center" prop="pay" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <span @click="handleDelete3(scope.row)" class="red">删除</span>
                <span @click="handleUpdate3(scope.row)" class="sanm">编辑</span>
              </template>
            </el-table-column>
          </el-table>

        </el-col>

        <el-col :span="12">

          <div class="tit">
            <em>*</em> 参观须知
            <div style="float:right;">
              <el-button type="primary" size="mini" @click="handleLang(4)">多语言配置</el-button>
              <el-button type="primary" size="mini" @click="handleAdd(1)">保存</el-button>
            </div>
          </div>
          <el-form-item label="参观须知" prop="noticeType">
            <el-input type="textarea" :rows="5" v-model="form.instructions" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="特别提醒" prop="noticeType">
            <el-input type="textarea" :rows="5" v-model="form.attention" placeholder="请输入" />
          </el-form-item>

          <div class="tit">
            <em>*</em> 联系我们
            <div style="float:right;">
              <el-button type="primary" size="mini" @click="handleLang(5)">多语言配置</el-button>
              <el-button type="primary" size="mini" @click="handleAdd(1)">保存</el-button>
            </div>
          </div>
          <el-form-item label="电话">
            <el-select style="width: 100px;" v-model="form.code" placeholder="请选择">
              <el-option
                v-for="(dict, index) in phones"
                :key="index"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
            <el-input style="width: 200px;" v-model="form.phone" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input type="textarea" :rows="3" v-model="form.address" placeholder="请输入" />
          </el-form-item>

          <div class="tit">
            <em>*</em> 导览地图
            <div style="float:right;">
              <el-button type="primary" size="mini" @click="toAdd(2)">添加地图</el-button>
            </div>
          </div>
          <el-table :data="maps">
            <el-table-column label="导览地图" align="center" prop="img">
              <template slot-scope="scope">
                <img :src="scope.row.img" style="height: 100px;" />
              </template>
            </el-table-column>
            <el-table-column label="楼层名称" align="center" prop="floor" />
            <el-table-column label="实际楼层" align="center" prop="acFloor" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <span @click="handleDelete6(scope.row)" class="red">删除</span>
                <span @click="handleUpdate6(scope.row)" class="sanm">编辑</span>
              </template>
            </el-table-column>
          </el-table>

        </el-col>

      </el-row>
    </el-form>


    <!-- 弹窗 -->
    <el-dialog title="添加停车场" :visible.sync="open3" width="600px" append-to-body>
      <el-form ref="form" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="停车场地址">
              <el-input type="textarea" :rows="3" v-model="form3.address" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开放时间" prop="noticeType">
              <el-radio-group v-model="form3.allDay">
                <el-radio :label="true">长期</el-radio>
                <el-radio :label="false">非长期</el-radio>
              </el-radio-group>
              <div v-if="form3.menuType==2">
                <el-select v-model="form3.dayStopTime" placeholder="请选择" clearable>
                  <el-option v-for="item in hours" :label="item" :value="item" />
                </el-select>
                <span> ： </span>
                <el-select v-model="form3.dayStopTime2" placeholder="请选择" clearable>
                  <el-option label="00" value="00" />
                  <el-option label="15" value="15" />
                  <el-option label="30" value="30" />
                  <el-option label="45" value="45" />
                </el-select>
                <span> ~ </span>
                <el-select v-model="form3.dayStopTime" placeholder="请选择" clearable>
                  <el-option v-for="item in hours" :label="item" :value="item" />
                </el-select>
                <span> ： </span>
                <el-select v-model="form3.dayStopTime2" placeholder="请选择" clearable>
                  <el-option label="00" value="00" />
                  <el-option label="15" value="15" />
                  <el-option label="30" value="30" />
                  <el-option label="45" value="45" />
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费标准">
              <el-input type="number" v-model="form3.pay" placeholder="请输入金额" />
              <span> 元/小时</span>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm3">确 定</el-button>
        <el-button @click="open3=false;">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加导览地图" :visible.sync="open6" width="600px" append-to-body>
      <el-form ref="form"  label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="导览地图" prop="noticeTitle">
              <img v-if="form6.img" :src="form6.img" style="width:150px;" />
              <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
                <el-button size="small">
                  上传图片
                  <i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-upload>
              <div class="tip">仅支持jpg、png、jpeg格式</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="楼层名称" prop="exhibitsName">
              <el-input v-model="form6.floor" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="实际楼层" prop="exhibitsAddress">
              <el-input v-model="form6.acFloor" placeholder="请输入" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm6">确 定</el-button>
        <el-button @click="open6=false">取 消</el-button>
      </div>
    </el-dialog>

    <lang ref="lang" />

  </div>
</template>

<script>
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/help";
import { listNotice3, getNotice3, delNotice3, addNotice3, updateNotice3 } from "@/api/park";
import { listNotice6, getNotice6, delNotice6, addNotice6, updateNotice6 } from "@/api/map";
import { getPhone, getPhoneCode } from "@/api/login";
import { upload, removeFile } from '@/api/common';

export default {
  name: "Notice",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      noticeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {
        date: []
      },
      // 表单校验
      rules: {
        noticeTitle: [
          { required: true, message: "公告标题不能为空", trigger: "blur" }
        ]
      },
      daterangeCreateTime: [],
      hours: [],
      phones: [],

      viewOpen: false,
      guideId: null,

      open3: false,
      form3: {},
      parks: [],

      open6: false,
      form6: {
        img: ''
      },
      maps: [],

      //多语言设置
      langOpen: false,
      langTit: '多语言配置',
      //type 1输入框 2图片上传 3富文本
      langDicts: [
        {id: 2, name: '名称', status: 0, flag: 1, type: 1, val: 'http://www.baidu.com'}
      ],
      setCur: {},
      setOpen: false,
      langs: [
        {id: 1, name: '中文（简体）', val: ''},
        {id: 2, name: '中文（繁体）', val: ''},
        {id: 3, name: '英语（English）', val: ''}
      ]

    };
  },
  created() {
    this.getList();
    let arr = [];
    for(let i=0;i<24;i++){
      arr.push(i+'')
    }
    this.hours = arr;

    getPhone().then(res => {
      let options = res.data || [];
      let arr = [];
      options.forEach(item=>{
        item.list.forEach(child=>{
          arr.push({
            //label: child.phoneCode + '  ' +child.nameZHCN,
            label: child.phoneCode,
            value: child.phoneCode
          })
        })
      })
      this.phones = arr;
    });
  },
  methods: {
    submitForm3(){
      this.form3.guideId = 1;
      if (this.form3.id != undefined) {
        updateNotice3(this.form3).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open3 = false;
          this.getList();
        });
      } else {
        addNotice3(this.form3).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open3 = false;
          this.getList();
        });
      }
    },
    submitForm6(){
      this.form6.guideId = 1;
      if (this.form6.id != undefined) {
        updateNotice6(this.form6).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open6 = false;
          this.getList();
        });
      } else {
        addNotice6(this.form6).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open6 = false;
          this.getList();
        });
      }
    },
    toAdd(type){
      if(type==1){
        this.open3 = true;
      }
      else{
        this.open6 = true;
      }
    },
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      // listNotice(this.queryParams).then(response => {
      //   this.noticeList = response.data.list || [];
      //   this.total = response.data.total || 0;
      //   this.loading = false;
      // });
      getNotice(1).then(response => {
        if(response.data && response.data.id){
          this.guideId = 1;
        }
        this.form = response.data || {};
      });
      listNotice3({}).then(response => {
        this.parks = response.data;
      });
      listNotice6({}).then(response => {
        this.maps = response.data;
      });
    },
    handleLang(type){
      this.$refs.lang.init(row, 'COLLECT_CLASS','参观指南');
    },
    handleSet(row){
      this.setCur = row;
      this.setOpen = true;
    },
    setSubmit(){
      addNotice(this.form).then(response => {
        this.$modal.msgSuccess("设置成功");
        this.setOpen = false;
        this.getList();
      });
    },
    setCancel(){
      this.setOpen = false;
    },
    handleView(row){
      this.form = row;
      this.viewOpen = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.noticeId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(type) {
      if(type==1){
        addNotice(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
        });
      }

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const noticeId = row.noticeId || this.ids
      getNotice(noticeId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "编辑藏品类型";
      });
    },
    handleUpdate3(row) {
      this.form3 = {};
      const noticeId = row.id
      getNotice3(noticeId).then(response => {
        this.form3 = response.data;
        this.open3 = true;
      });
    },
    handleUpdate6(row) {
      this.form6 = {};
      const noticeId = row.id
      getNotice6(noticeId).then(response => {
        this.form6 = response.data;
        this.open6 = true;
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.guideId != undefined) {
            updateNotice(this.form).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
          } else {
            addNotice(this.form).then(response => {
              this.$modal.msgSuccess("保存成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const noticeIds = row.noticeId || this.ids
      this.$modal.confirm('是否确认删除公告编号为"' + noticeIds + '"的数据项？').then(function() {
        return delNotice(noticeIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    handleDelete3(row) {
      const noticeIds = row.id
      this.$modal.confirm('是否确认删除吗？').then(function() {
        return delNotice3(noticeIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    handleDelete6(row) {
      const noticeIds = row.id
      this.$modal.confirm('是否确认删除吗？').then(function() {
        return delNotice6(noticeIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    requestUpload(e) {
      let formData = new FormData();
      formData.append('file', e.file);
      formData.append('path', 'user/info');
      upload(formData).then(res => {
        if(res.code=='00000'){
          this.form6.img = res.data.filePath;
          this.$modal.msgSuccess("上传成功");
        }
        else{
          this.$modal.msgError("上传失败");
        }
      });
    },
    // 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
        return false
      } else {

      }
    }
  }
};
</script>
<style>
  .tit{ margin-bottom:20px; }
  .help .el-select{ width:120px !important; }
</style>